<script setup>
import { onMounted, reactive } from 'vue';
import { useRoute } from 'vue-router'
import { detailsAPI } from '../../../../api'
import dayjs from 'dayjs'
import Songlist from './songlist.vue'
const route = useRoute()
console.log(route.params.id);
const detalsobj = reactive({
  objDeta:{},
  avatarobj:{},
  avatars:{}
})

const detals = async () => {
  const {data:res} = await detailsAPI(route.params.id)
  console.log(res);
  detalsobj.objDeta = res.playlist
  detalsobj.avatarobj = res.playlist.creator
  detalsobj.avatars = res.playlist.creator.avatarDetail
  console.log(res.playlist.creator);
  
}

onMounted(()=>{
  detals()
})
</script>
<template>
  
  <div class="detals">
    <div class="detals-left">
      <div class="detals-context">
        <div class="png">
          <!-- <img :src="detalsobj.objDeta.coverImgUrl " alt=""> -->
          <img :src="detalsobj.objDeta.coverImgUrl" alt="">
        </div>
        <div class="hd">
          <div class="hd-top">
            <i class="label"></i>
            <div class="title">{{detalsobj.objDeta.name}}</div>
          </div>
          <div class="creator">
            <div class="headportrait">
              <img :src="detalsobj.avatarobj.avatarUrl" alt="">
            </div>
            <div class="name">{{detalsobj.avatarobj.nickname}}</div>
            <div class="pig"><img :src="detalsobj.avatars.identityIconUrl" alt=""></div>
            <div class="time">{{dayjs(detalsobj.objDeta.createTime).format('YYYY-MM-DD')}} 创建</div>
          </div>
          <div class="operation">
            <div class="playbut">
              <div class="play-none ">
                <div class="playhot butpag"></div>
                <em class="butpag"></em>
                <span>播放</span>
                <div class="jpg butpag"></div>
              </div>
              <div class="play-two">
                <div class="playsa butpag"></div>
                <span>({{detalsobj.objDeta.subscribedCount}})</span>
              </div>
              <div class="play-two">
                <div class="playsa butpag share"></div>
                <span>({{detalsobj.objDeta.shareCount}})</span>
              </div>
              <div class="play-two">
                <div class="playsa butpag download"></div>
                下载
              </div>
              <div class="play-two">
                <div class="playsa butpag comment"></div>
                <span>({{detalsobj.objDeta.commentCount}})</span>
              </div>
            </div>
          </div>
          <div class="labels">
            <div class="label-szie">
              <span>标签:</span>
              <a href="javascript:;" v-for="(Item,index) in detalsobj.objDeta.tags" :key="index">{{Item}}</a>
            </div>
          </div>
          <div class="introduce"><b>介绍:</b> {{ detalsobj.objDeta.description || ''}}</div>
         
        </div>
      </div>
      <div class="songlist">
              <Songlist :paylist="detalsobj.objDeta"></Songlist>
      </div>
    </div>

    <div class="detals-right">1</div>
  </div>
</template>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.detals {
  display: flex;
  width: 980px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  .detals-left {
    width: 710px;
    padding: 47px 0px 40px 39px;
    .detals-context {
      display: flex;
      width: 710px;
      .png {
        width: 200px;
        height: 200px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .hd {
        margin-left: 30px;
        .hd-top {
          display: flex;
          .label {
            display: inline-block;
            width: 54px;
            height: 24px;
            vertical-align: middle;
            background-position: 0 -243px !important;
            background: url(https://s2.music.126.net/style/web2/img/icon.png?5025a0435ce5d0b150f2395f8d02b3c3) no-repeat 0 9999px;
            }
            .title {
              margin-top: -10px;
              margin-left: 10px;
              font-size: 24px;
              width: 346px;
            }
          }
          .creator {
            display: flex;
            margin-top: 10px;
            .headportrait {
              width: 35px;
              height: 35px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .name {
              font-size: 12px;
              color: #0c73c2;
              line-height: 30px;
              padding-left:10px;
            }
            .pig {
              height: 13px;
              width: 13px;
              margin-top: 2px;
              img {
                width: 100%;
                height: 100%;
                
              }
            }
            .time {
              margin-top: 7px;
              margin-left: 15px;
              font-size: 12px;
              color: #999;
            }
          }
          .operation {
            margin-top: 10px;
            .butpag {
              background: url(https://s2.music.126.net/style/web2/img/button2.png?df6c504ddfa1268193be3824373ed030) no-repeat 0 9999px;
            }
            .playbut {
              display: flex;
              .play-none  {
                display: flex;
                &:hover {
                  cursor: pointer;
                }
                // background-position: right -428px !important;
                .playhot {
                  width: 66px;
                  height: 31px;
                  background-position: 0 -387px !important;
                }
                em {
                  display: inline-block;
                  width: 20px;
                  height: 18px;
                  margin: 6px 2px 2px -61px;
                  background-position: 0 -1622px;
                }
                span {
                  font-size: 12px;
                  color: #fff;
                  margin-top: 5px;
                }
                .jpg {
                  width: 31px;
                  margin-left: 15px;
                  background-position: 0 -1588px !important;
                }
              }
             .play-two {
               display: flex;
               align-items: center;
               margin-left: 10px;
               width: 76px;
               height: 30px;
               background: #fcfcfc;
               border-radius: 4px;
               border: 1px solid #c4c4c4;
               overflow: hidden;
               font-size: 12px;
               color: #333333;
               padding: 0 5px 0 0;
               &:hover {
                 cursor: pointer;
               }
              .playsa {
                width: 32px;
                height: 30px;
                margin-left: -1px;
                background-position: 0 -977px;
             
              }
              .share {
                vertical-align: middle;
                background-position: 0 -1225px !important;
              }
              .download {
                background-position: 0 -2761px !important;
              }
              .comment {
                background-position: 0 -1465px !important;
              }
             }
              
            }
          }
          .labels {
            margin-top: 20px;
            .label-szie {
              span {
                font-size: 12px;
                color: #666;
              }
              a {
                display: inline-block;
                width: 50px;
                height: 21px;
                line-height: 17px;
                text-align: center;
                color: #777;
                font-size: 12px;
                margin-left: 10px;
                border-radius:  10px;
                background: #f4f4f4;
                border: 1px solid #d2d2d2;
              }
            }
          }
          .introduce {
            margin-top: 8px;
            width: 440px;
            color: #666;
            font-size: 12px;
            line-height: 18px;
            text-overflow:-o-ellipsis-lastline;
            overflow:hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            b {
              padding-right: 10px;
              font-weight: normal;
            }
          }

        }
    
      }
      .songlist {
          margin-top: 50px;
      }
    }
}
</style>
